React experimental_useFormStatus : Un Guide Complet pour une Gestion de Formulaire Améliorée

            // app/contact-form.jsx (Composant Serveur)
'use server';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Simule une soumission de formulaire asynchrone
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // Dans une application réelle, vous enverriez les données à un serveur
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Message:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbnRhY3QtZm9ybS5qc3ggKENvbXBvc2FudCBTZXJ2ZXVyKQondXNlIHNlcnZlcic7CgppbXBvcnQgeyBleHBlcmltZW50YWxfdXNlRm9ybVN0YXR1cyBhcyB1c2VGb3JtU3RhdHVzIH0gZnJvbSAncmVhY3QtZG9tJzsKCmFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICd1c2Ugc2VydmVyJzsKICAvLyBTaW11bGUgdW5lIHNvdW1pc3Npb24gZGUgZm9ybXVsYWlyZSBhc3luY2hyb25lCiAgYXdhaXQgbmV3IFByb21pc2UoKHJlc29sdmUpID0+IHNldFRpbWVvdXQocmVzb2x2ZSwgMjAwMCkpOwoKICBjb25zdCBuYW1lID0gZm9ybURhdGEuZ2V0KCduYW1lJyk7CiAgY29uc3QgZW1haWwgPSBmb3JtRGF0YS5nZXQoJ2VtYWlsJyk7CiAgY29uc3QgbWVzc2FnZSA9IGZvcm1EYXRhLmdldCgnbWVzc2FnZScpOwoKICBpZiAoIW5hbWUgfHwgIWVtYWlsIHx8ICFtZXNzYWdlKSB7CiAgICB0aHJvdyBuZXcgRXJyb3IoJ0FsbCBmaWVsZHMgYXJlIHJlcXVpcmVkLicpOwogIH0KCiAgLy8gRGFucyB1bmUgYXBwbGljYXRpb24gcullbGxlLCB2b3VzIGVudmVycmlleiBsZXMgZG9ubullcyDgIHVuIHNlcnZldXIKICBjb25zb2xlLmxvZygnRm9ybSBkYXRhOicsIHsgbmFtZSwgZW1haWwsIG1lc3NhZ2UgfSk7CgogIHJldHVybiB7IHN1Y2Nlc3M6IHRydWUsIG1lc3NhZ2U6ICdUaGFuayB5b3UgZm9yIHlvdXIgc3VibWlzc2lvbiEnIH07Cn0KCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IHsgcGVuZGluZywgZGF0YSwgZXJyb3IgfSA9IHVzZUZvcm1TdGF0dXMoKTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibmFtZSI+TmFtZTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+RW1haWw6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJlbWFpbCIgbmFtZT0iZW1haWwiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibWVzc2FnZSI+TWVzc2FnZTo8L2xhYmVsPgogICAgICAgIDx0ZXh0YXJlYSBpZD0ibWVzc2FnZSIgbmFtZT0ibWVzc2FnZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCIgZGlzYWJsZWQ9e3BlbmRpbmd9PgogICAgICAgIHtwZW5kaW5nID8gJ1N1Ym1pdHRpbmcuLi4nIDogJ1N1Ym1pdCd9CiAgICAgIDwvYnV0dG9uPgoKICAgICAge2Vycm9yICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAncmVkJyB9fT5FcnJvcjoge2Vycm9yLm1lc3NhZ2V9PC9wPn0KICAgICAge2RhdGE/LnN1Y2Nlc3MgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e2RhdGEubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IENvbnRhY3RGb3JtOwo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Explication :</b></p>

<ol>
  <li><b>'use server' :</b> Cette directive désigne la fonction <code>handleSubmit</code> comme une React Server Action. Les Server Actions vous permettent d'exécuter du code côté serveur directement depuis vos composants React.</li>
  <li><b><code>useFormStatus()</code> :</b> Nous appelons le hook <code>useFormStatus()</code> au sein du composant <code>ContactForm</code>. Il retourne un objet avec les propriétés suivantes :</li>
    <ul>
      <li><code>pending</code> : Un booléen indiquant si le formulaire est en cours de soumission.</li>
      <li><code>data</code> : Les données retournées par la Server Action après une soumission réussie.</li>
      <li><code>error</code> : Un objet d'erreur si la Server Action lève une erreur.</li>
    </ul>
  <li><b>Éléments du formulaire :</b> Le formulaire comprend des champs de saisie pour le nom, l'e-mail et le message. L'attribut <code>disabled</code> est défini sur <code>pending</code>, empêchant l'utilisateur d'interagir avec le formulaire pendant sa soumission.</li>
  <li><b>Bouton de soumission :</b> Le texte du bouton de soumission passe à "Envoi en cours..." lorsque <code>pending</code> est vrai.</li>
  <li><b>Messages d'erreur et de succès :</b> Le composant affiche un message d'erreur si <code>error</code> est présent, et un message de succès si <code>data.success</code> est vrai.</li>
</ol>

<h3>Propriétés retournées par <code>useFormStatus</code></h3>

<ul>
  <li><b><code>pending</code> :</b> Une valeur booléenne indiquant si le formulaire est en cours de soumission. C'est utile pour désactiver le bouton de soumission et afficher un indicateur de chargement.</li>
  <li><b><code>data</code> :</b> Les données retournées par la Server Action après une soumission de formulaire réussie. Cela peut être n'importe quelle valeur sérialisable.
  <li><b><code>error</code> :</b> Un objet d'erreur si la Server Action a levé une exception pendant la soumission. Cela vous permet d'afficher des messages d'erreur à l'utilisateur.</li>
  <li><b><code>action</code> :</b> La fonction Server Action qui a été appelée. Cela peut être utile pour identifier quelle action était responsable de l'état actuel.</li>
  <li><b><code>formState</code> :</b> (Moins courant) L'état du formulaire associé au formulaire. Ceci est particulièrement pertinent lorsque vous gérez l'état du formulaire de manière externe.</li>
</ul>

<h2>Cas d'utilisation avancés</h2>

<h3>1. Gestion dynamique des erreurs et validation</h3>

<p><code>experimental_useFormStatus</code> peut être utilisé pour implémenter une gestion dynamique des erreurs et une validation. Par exemple, vous pouvez vérifier la propriété <code>error</code> et afficher des messages d'erreur spécifiques en fonction du type d'erreur qui s'est produite.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>function ContactForm() {
  const { pending, data, error } = useFormStatus();

  let errorMessage = null;

  if (error) {
    if (error.message === 'All fields are required.') {
      errorMessage = 'Veuillez remplir tous les champs obligatoires.';
    } else {
      errorMessage = 'Une erreur est survenue lors de la soumission du formulaire.';
    }
  }

  return (
    <form action={handleSubmit}>
      {/* ... champs du formulaire ... */}

      {errorMessage && <p style={{ color: 'red' }}>Erreur : {errorMessage}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="ZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwoKICBsZXQgZXJyb3JNZXNzYWdlID0gbnVsbDsKCiAgaWYgKGVycm9yKSB7CiAgICBpZiAoZXJyb3IubWVzc2FnZSA9PT0gJ0FsbCBmaWVsZHMgYXJlIHJlcXVpcmVkLicpIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ1ZldWlsbGV6IHJlbXBsaXIgdG91cyBsZXMgY2hhbXBzIG9ibGlnYXRvaXJlcy4nOwogICAgfSBlbHNlIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ1VuZSBlcnJldXIgZXN0IHN1cnZlbnVlIGxvcnMgZGUgbGEgc291bWlzc2lvbiBkdSBmb3JtdWxhaXJlLic7CiAgICB9CiAgfQoKICByZXR1cm4gKAogICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICB7LyogLi4uIGNoYW1wcyBkdSBmb3JtdWxhaXJlIC4uLiAqL30KCiAgICAgIHtlcnJvck1lc3NhZ2UgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdyZWQnIH19PkVycmV1ciA6IHtlcnJvck1lc3NhZ2V9PC9wPn0KICAgICAge2RhdGE/LnN1Y2Nlc3MgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e2RhdGEubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>2. Mises à jour optimistes</h3>

<p>Les mises à jour optimistes consistent à mettre à jour l'interface utilisateur immédiatement comme si la soumission du formulaire allait réussir, avant même que le serveur ne confirme la soumission. Cela peut améliorer l'expérience utilisateur en rendant l'application plus réactive. <code>experimental_useFormStatus</code> peut être utilisé pour gérer les mises à jour optimistes en maintenant une variable d'état distincte pour suivre les données optimistes.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>import { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Simule une soumission de formulaire asynchrone
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // Dans une application réelle, vous enverriez les données à un serveur
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();
  const [optimisticMessage, setOptimisticMessage] = useState('');

  const handleSubmitOptimistic = async (formData) => {
      setOptimisticMessage('Envoi en cours...');
      const result = await handleSubmit(formData); // Attend la Server Action.
      if (result?.success){
        setOptimisticMessage(result.message)
      } else {
          setOptimisticMessage("");
      }

  };
  return (
    <form action={handleSubmitOptimistic}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" disabled={pending} />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" disabled={pending} />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" disabled={pending} />
      </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {optimisticMessage && <p style={{ color: 'green' }}>{optimisticMessage}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="aW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIFNpbXVsZSB1bmUgc291bWlzc2lvbiBkZSBmb3JtdWxhaXJlIGFzeW5jaHJvbmUKICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBEYW5zIHVuZSBhcHBsaWNhdGlvbiBy6WVsbGUsIHZvdXMgZW52ZXJyaWV6IGxlcyBkb25u6WVzIOAgdW4gc2VydmV1cgogIGNvbnNvbGUubG9nKCdGb3JtIGRhdGE6JywgeyBuYW1lLCBlbWFpbCwgbWVzc2FnZSB9KTsKCiAgcmV0dXJuIHsgc3VjY2VzczogdHJ1ZSwgbWVzc2FnZTogJ1RoYW5rIHlvdSBmb3IgeW91ciBzdWJtaXNzaW9uIScgfTsKfQoKZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwogIGNvbnN0IFtvcHRpbWlzdGljTWVzc2FnZSwgc2V0T3B0aW1pc3RpY01lc3NhZ2VdID0gdXNlU3RhdGUoJycpOwoKICBjb25zdCBoYW5kbGVTdWJtaXRPcHRpbWlzdGljID0gYXN5bmMgKGZvcm1EYXRhKSA9PiB7CiAgICAgIHNldE9wdGltaXN0aWNNZXNzYWdlKCdFbnZvaSBlbiBjb3Vycy4uLicpOwogICAgICBjb25zdCByZXN1bHQgPSBhd2FpdCBoYW5kbGVTdWJtaXQoZm9ybURhdGEpOyAvLyBBdHRlbmQgbGEgU2VydmVyIEFjdGlvbi4KICAgICAgaWYgKHJlc3VsdD8uc3VjY2Vzcyl7CiAgICAgICAgc2V0T3B0aW1pc3RpY01lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIH0gZWxzZSB7CiAgICAgICAgICBzZXRPcHRpbWlzdGljTWVzc2FnZSgiIik7CiAgICAgIH0KCiAgfTsKICByZXR1cm4gKAogICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXRPcHRpbWlzdGljfT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibmFtZSI+TmFtZTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+RW1haWw6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJlbWFpbCIgbmFtZT0iZW1haWwiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibWVzc2FnZSI+TWVzc2FnZTo8L2xhYmVsPgogICAgICAgIDx0ZXh0YXJlYSBpZD0ibWVzc2FnZSIgbmFtZT0ibWVzc2FnZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCIgZGlzYWJsZWQ9e3BlbmRpbmd9PgogICAgICAgIHtwZW5kaW5nID8gJ1N1Ym1pdHRpbmcuLi4nIDogJ1N1Ym1pdCd9CiAgICAgIDwvYnV0dG9uPgoKICAgICAge2Vycm9yICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAncmVkJyB9fT5FcnJvcjoge2Vycm9yLm1lc3NhZ2V9PC9wPn0KICAgICAge29wdGltaXN0aWNNZXNzYWdlICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAnZ3JlZW4nIH19PntvcHRpbWlzdGljTWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IENvbnRhY3RGb3JtOwo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>3. Indicateurs de progression pour les téléversements de fichiers</h3>

<p>Bien que <code>experimental_useFormStatus</code> ne fournisse pas directement de mises à jour de progression pour les téléversements de fichiers, vous pouvez le combiner avec d'autres techniques pour implémenter des indicateurs de progression. Par exemple, vous pouvez utiliser l'API <code>FormData</code> pour suivre la progression d'un téléversement de fichier et mettre à jour l'interface utilisateur en conséquence.</p>

<p><b>Note :</b> Parce que ce hook fonctionne principalement en conjonction avec les Server Actions, l'accès direct à la progression du téléversement au sein de <code>experimental_useFormStatus</code> lui-même est limité. Vous géreriez généralement la progression du téléversement dans votre code de Server Action (si possible, selon l'environnement) puis refléteriez l'état global de la soumission du formulaire en utilisant <code>experimental_useFormStatus</code>.</p>

<h2>Considérations globales</h2>

<p>Lors du développement de formulaires pour un public mondial, il est essentiel de prendre en compte les points suivants :</p>

<ul>
  <li><b>Localisation :</b> Assurez-vous que toutes les étiquettes de formulaire, les messages d'erreur et les notifications de succès sont localisés dans la langue préférée de l'utilisateur. Utilisez des bibliothèques et des frameworks d'internationalisation (i18n) pour gérer efficacement les traductions.</li>
  <li><b>Formats de date et de nombre :</b> Utilisez des formats de date et de nombre appropriés en fonction des paramètres régionaux de l'utilisateur. Par exemple, les dates peuvent être formatées en MM/JJ/AAAA aux États-Unis, mais en JJ/MM/AAAA dans de nombreux autres pays. De même, les formats de nombre peuvent utiliser différents séparateurs décimaux et de milliers.</li>
  <li><b>Fuseaux horaires :</b> Si votre formulaire implique une planification ou des informations sensibles au temps, soyez attentif aux fuseaux horaires. Permettez aux utilisateurs de sélectionner leur fuseau horaire et convertissez les heures en conséquence.</li>
  <li><b>Formats d'adresse :</b> Les formats d'adresse varient considérablement d'un pays à l'autre. Fournissez des champs d'adresse flexibles qui s'adaptent à différentes structures d'adresse.</li>
  <li><b>Accessibilité :</b> Assurez-vous que vos formulaires sont accessibles aux utilisateurs handicapés. Utilisez des éléments HTML sémantiques, fournissez un texte alternatif pour les images et assurez-vous que vos formulaires sont navigables au clavier.</li>
  <li><b>Formats de devise :</b> Si vous traitez des valeurs monétaires, formatez la devise de manière appropriée en fonction de la localisation de l'utilisateur. Utilisez des symboles monétaires et des conventions de formatage familiers à l'utilisateur. Par exemple, aux États-Unis, vous utiliseriez « $1,234.56 », tandis qu'en Allemagne, vous pourriez utiliser « 1.234,56 € ».</li>
  <li><b>Sensibilité culturelle :</b> Soyez conscient des différences culturelles qui peuvent affecter la conception du formulaire. Par exemple, certaines couleurs ou symboles peuvent avoir des significations différentes dans différentes cultures.</li>
</ul>

<p><b>Exemple : Formulaire d'adresse international</b></p>

<p>Un formulaire d'adresse simple pourrait supposer une adresse de style américain. Un formulaire conçu pour un public mondial doit offrir plus de flexibilité.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
 <form>
  <label for="address1">Ligne d'adresse 1 :</label>
  <input type="text" id="address1" name="address1"><br><br>

  <label for="address2">Ligne d'adresse 2 (Optionnel) :</label>
  <input type="text" id="address2" name="address2"><br><br>

  <label for="city">Ville :</label>
  <input type="text" id="city" name="city"><br><br>

  <label for="state">État/Province :</label>
  <input type="text" id="state" name="state"><br><br>

  <label for="postalCode">Code Postal :</label>
  <input type="text" id="postalCode" name="postalCode"><br><br>

  <label for="country">Pays :</label>
  <select id="country" name="country">
   <option value="USA">États-Unis</option>
   <option value="CAN">Canada</option>
   {/* Plus d'options de pays */}
  </select><br><br>

  <input type="submit" value="Soumettre">
 </form>
</code>
            <div class="copy-button-container">
              <button 
                data-code="CiA8Zm9ybT4KICA8bGFiZWwgZm9yPSJhZGRyZXNzMSI+TGlnbmUgZCdhZHJlc3NlIDEgOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJhZGRyZXNzMSIgbmFtZT0iYWRkcmVzczEiPjxicj48YnI+CgogIDxsYWJlbCBmb3I9ImFkZHJlc3MyIj5MaWduZSBkJ2FkcmVzc2UgMiAoT3B0aW9ubmVsKSA6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MyIiBuYW1lPSJhZGRyZXNzMiI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iY2l0eSI+VmlsbGUgOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJjaXR5IiBuYW1lPSJjaXR5Ij48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJzdGF0ZSI+yXRhdC9Qcm92aW5jZSA6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9InN0YXRlIiBuYW1lPSJzdGF0ZSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0icG9zdGFsQ29kZSI+Q29kZSBQb3N0YWwgOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJwb3N0YWxDb2RlIiBuYW1lPSJwb3N0YWxDb2RlIj48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJjb3VudHJ5Ij5QYXlzIDo8L2xhYmVsPgogIDxzZWxlY3QgaWQ9ImNvdW50cnkiIG5hbWU9ImNvdW50cnkiPgogICA8b3B0aW9uIHZhbHVlPSJVU0EiPsl0YXRzLVVuaXM8L29wdGlvbj4KICAgPG9wdGlvbiB2YWx1ZT0iQ0FOIj5DYW5hZGE8L29wdGlvbj4KICAgey8qIFBsdXMgZCdvcHRpb25zIGRlIHBheXMgKi99CiAgPC9zZWxlY3Q+PGJyPjxicj4KCiAgPGlucHV0IHR5cGU9InN1Ym1pdCIgdmFsdWU9IlNvdW1ldHRyZSI+CiA8L2Zvcm0+Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Améliorations pour une utilisation mondiale :</b></p>

<ul>
 <li>Utilisez une liste complète de pays.</li>
 <li>Envisagez une configuration de champ d'adresse dynamique basée sur la sélection du pays (en utilisant une bibliothèque ou une API pour la validation du format d'adresse).</li>
 <li>Permettez une ligne d'adresse 3 ou plus, car certains pays exigent un formatage d'adresse très spécifique.</li>
 <li>Séparez "État/Province/Région" et "Code postal/ZIP" en champs distincts avec des étiquettes claires qui fonctionnent à l'international.</li>
</ul>

<h2>Meilleures pratiques pour l'utilisation de <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>Gardez les Server Actions simples :</b> Visez à ce que vos Server Actions se concentrent sur le traitement des données et évitez les mises à jour complexes de l'interface utilisateur directement dans l'action. Fiez-vous à la propriété <code>data</code> retournée par <code>experimental_useFormStatus</code> pour mettre à jour l'interface utilisateur dans le composant client.</li>
  <li><b>Gérez les erreurs avec élégance :</b> Mettez en œuvre une gestion robuste des erreurs au sein de vos Server Actions pour intercepter les exceptions potentielles. Utilisez la propriété <code>error</code> pour afficher des messages d'erreur informatifs à l'utilisateur.</li>
  <li><b>Fournissez un retour clair :</b> Utilisez la propriété <code>pending</code> pour fournir un retour clair à l'utilisateur pendant la soumission du formulaire (par exemple, en désactivant le bouton de soumission, en affichant un indicateur de chargement).</li>
  <li><b>Optimisez les performances :</b> Soyez attentif aux performances, en particulier lorsque vous traitez de grands formulaires ou des Server Actions complexes. Utilisez des techniques telles que la mémoïsation et le fractionnement du code pour optimiser les performances de votre application.</li>
  <li><b>Pensez à l'accessibilité :</b> Assurez-vous que vos formulaires sont accessibles à tous les utilisateurs, y compris ceux qui ont des handicaps. Suivez les directives d'accessibilité et utilisez des technologies d'assistance pour tester vos formulaires.</li>
</ul>

<h2>Alternatives à <code>experimental_useFormStatus</code></h2>

<p>Bien que <code>experimental_useFormStatus</code> offre un moyen pratique de gérer l'état des formulaires, il existe d'autres approches que vous pouvez envisager :</p>

<ul>
  <li><b>Gestion d'état personnalisée :</b> Vous pouvez gérer manuellement l'état du formulaire en utilisant les fonctionnalités de gestion d'état intégrées de React (par exemple, <code>useState</code>, <code>useReducer</code>). Cette approche offre plus de flexibilité mais nécessite plus de code répétitif.</li>
  <li><b>Bibliothèques de formulaires :</b> Des bibliothèques de formulaires telles que Formik, React Hook Form et Final Form fournissent des solutions complètes de gestion de formulaires, y compris la validation, la gestion de la soumission et la gestion de l'état.</li>
  <li><b>Bibliothèques de gestion d'état tierces :</b> Des bibliothèques de gestion d'état telles que Redux, Zustand et Recoil peuvent être utilisées pour gérer l'état du formulaire de manière centralisée. Cette approche est adaptée aux applications plus grandes avec des exigences complexes de gestion d'état.</li>
</ul>

<p>Le choix de l'approche dépend des exigences spécifiques de votre application. <code>experimental_useFormStatus</code> est particulièrement bien adapté aux applications qui utilisent des React Server Components et nécessitent un moyen simple et déclaratif de gérer l'état des formulaires.</p>

<h2>Conclusion</h2>

<p><code>experimental_useFormStatus</code> est un ajout précieux à la boîte à outils de React pour la création de formulaires dynamiques et réactifs. En fournissant un moyen centralisé et déclaratif de gérer l'état du formulaire, ce hook simplifie la gestion des formulaires asynchrones, améliore l'expérience utilisateur et renforce la gestion des erreurs. Bien qu'il s'agisse encore d'une API expérimentale, <code>experimental_useFormStatus</code> représente une direction prometteuse pour la gestion des formulaires dans React, en particulier dans le contexte des React Server Components. En comprenant ses fonctionnalités, ses avantages et ses meilleures pratiques, les développeurs peuvent tirer parti de ce hook pour créer des formulaires plus robustes et conviviaux pour un public mondial.</p>

<p>Comme pour toute fonctionnalité expérimentale, il est crucial de rester à jour sur les derniers développements et d'être préparé à d'éventuels changements d'API à mesure qu'elle évolue vers une version stable. Cependant, les principes fondamentaux et les avantages de <code>experimental_useFormStatus</code> resteront probablement pertinents, ce qui en fait un outil intéressant à explorer et à intégrer dans votre flux de travail de développement React.</p></div><template id="P:4"></template></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimental_useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">état de formulaire</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">gestion de formulaire</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Components</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">expérience utilisateur</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">soumission de formulaire</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formulaires asynchrones</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">amélioration progressive</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>